import { Component, createContext } from "react"
/**
 * 跨多级组件通信：
 * 1.创建context对象
 * 使用PRrovider 提供共享数据
 * 使用Comsumer 接受共享数据
 */
// const data = createContext()
// 上面的data要经过解构拿到需要的Provider和Consumer
const { Provider, Consumer } = createContext()
// console.log('context对象', Provider, Comsumer)
class App extends Component {
  state = {
    count: 0,
    str: [1, 2, 3]
  }
  render () {
    return (
      <Provider value={this.state}>
        <div>
          <h1>子组件</h1>
        </div>
        <Son></Son>
        <GrandSon></GrandSon>
      </Provider>
    )
  }
}
class Son extends Component {
  render () {
    return (
      <div>
        <h2>子组件</h2>
      </div>
    )
  }
}
class GrandSon extends Component {
  render () {
    return (
      <div>
        <h3>孙子组件</h3>
        {/* <Comsumer>{(data)=>{ 
          js逻辑
          return html结构}} </Comsumer>*/}
        <Consumer>{(data) => {
          console.log(data)
          return (<div>
            <h3>{data.count}</h3>
            <h3>{data.str}</h3>
          </div>)
        }}</Consumer>
      </div>
    )
  }
}
export default App